class Fade {
    constructor(oListLi, oPtionLi, oBtn) {
        this.oListLi = oListLi;
        // console.log(oListLi);
        this.oPtionLi = oPtionLi;
        this.oBtn = oBtn;
        this.len = oPtionLi.length;
        this.index = 0;
    }
    init() {
        this.optionSwitch();
        this.btnSwitch();
    }

    optionSwitch() {
        for (let i = 0; i < this.len; i++) {
            this.oPtionLi[i].addEventListener("mouseover", () => {
                this.oPtionLi[this.index].className = "";
                this.oPtionLi[i].className = "active";
                this.oListLi[this.index].className = "";
                this.oListLi[i].className = "block";
                this.index = i;
            })
        }
    }

    btnSwitch() {
        for (let i = 0; i < 2; i++) {
            this.oBtn[i].addEventListener("click", () => {
                this.oPtionLi[this.index].className = "";
                this.oListLi[this.index].className = "";
                if (i) {
                    this.index++;
                    if (this.index == this.len) {
                        this.index = 0
                    }
                } else {
                    this.index--;
                    if (this.index == -1) {
                        this.index = this.len - 1
                    }
                    console.log(this.index)
                }
                this.oPtionLi[this.index].className = "active";
                this.oListLi[this.index].className = "block";
            })
        }
    }
}

class FadeChildren extends Fade {
    constructor(oListLi, oPtionLi, oBtn, wrap) {
        super(oListLi, oPtionLi, oBtn);
        this.wrap = wrap;
        this.timer = null;
    }
    init() {
        this.play();
        this.pause();
        this.optionSwitch();
        this.btnSwitch();
    }

    play() {
        clearInterval(this.timer);
        this.timer = setInterval(() => {
            this.oPtionLi[this.index].className = "";
            this.oListLi[this.index].className = "";
            this.index++;
            if (this.index == this.len) {
                this.index = 0
            }
            this.oPtionLi[this.index].className = "active";
            this.oListLi[this.index].className = "block";
        }, 2000)
    }

    pause() {
        this.wrap.addEventListener("mouseover", () => {
            clearInterval(this.timer);
        });
        this.wrap.addEventListener("mouseout", () => {
            this.play()
        })
    }
}

let oListLi = document.querySelectorAll("#list li");
let oPtionLi = document.querySelectorAll("#option li");
let oBtn = document.querySelectorAll("#btn a");
let wrap = document.querySelector("#slides");
// console.log(oListLi, oPtionLi, oBtn);
// new Fade(oListLi,oPtionLi,oBtn).init();
new FadeChildren(oListLi, oPtionLi, oBtn, wrap).init()